<template>
	<div class="container">
		<el-row type="flex">
			<el-form :inline="true" :model="form" class="demo-form-inline">
				<el-form-item label="商品名称">
					<el-input v-model="form.goods_name" clearable placeholder="商品名称关键词" />
				</el-form-item>
				<el-form-item label="商品分类">
					<el-cascader
						v-model="form.category_id"
						:options="shopCategorys"
						:props="{
							value: 'id',
							label: 'cat_name',
							children: 'children',
							emitPath: false
						}"
						clearable
					/>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" :disabled="mode === 'show' && selectids.length < 1" @click="onSearch">查询</el-button>
				</el-form-item>
				<el-form-item v-show="isShowOpsBtn">
					<el-button
						size="mini"
						type="warning"
						:disabled="goodsSelect.length < 1"
						@click="dels"
						>批量删除</el-button
					>
				</el-form-item>
			</el-form>
		</el-row>
		<el-row>
			<el-table
				:data="goodsData"
				style="width: 100%"
				@selection-change="selectionSelect"
				max-height="650"
			>
				<el-table-column prop="id" label="ID" type="selection" width="42" />
				<el-table-column prop="cover" label="商品">
					<template #default="scope">
						<goods-info-item :row="scope.row" :baseUrl="baseUrl" />
					</template>
				</el-table-column>
				<el-table-column prop="price" label="价格" width="100">
					<template #default="scope">
						<div class="goods-info page-shop-goods-price-box">
							<div class="price">
								<div>{{ getMoneyByMinute(scope.row.min_price) }}</div>
								<div v-show="scope.row.min_price != scope.row.max_price">
									{{ getMoneyByMinute(scope.row.max_price) }}
								</div>
							</div>
						</div>
					</template>
				</el-table-column>
				<el-table-column prop="stock" label="库存" width="100" />
				<el-table-column prop="status" label="状态" width="80">
					<template #default="scope">
						{{ scope.row.status == 1 ? "上架" : "仓库" }}
					</template>
				</el-table-column>
				<el-table-column fixed="right" label="操作" width="100" v-if="mode !== 'select'">
					<template #default="scope">
						<el-button @click="deleteRow(scope.$index)" type="text" size="small">
							移除
						</el-button>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
				:current-page="pageInfo.page_index"
				:page-sizes="[10, 20, 50, 100]"
				:page-size="pageInfo.page_size"
				layout="total, sizes, prev, pager, next, jumper"
				:total="pageInfo.tatal_count"
				hide-on-single-page
			/>
		</el-row>
	</div>
</template>

<script>
import { ElMessageBox, ElMessage } from "element-plus";
export default {
	name: "select-goods-table-goodsid",
	components: { },
	props: {
		isShowOpsBtn: { type: Boolean, default: false },
		mode: { type: String, default: "select" }
	},
	emits: ["select", "selectChange"],
	data() {
		return {
			baseUrl: "",
			goodsData: [],
			selectids: [],
			goodsSelect: [],
			shopCategorys: [],
			form: {},
			defaultPageInfo: {
				page_index: 1,
				page_size: 10,
				tatal_count: 0
			},
			pageInfo: {
				page_index: 1,
				page_size: 10,
				tatal_count: 0
			}
		};
	},
	mounted() {
		this.getBaseUrl()
		this.getsShopCategorys();
		console.log("getsShopCategorys");
	},
	methods: {
		async getBaseUrl() {
			this.baseUrl = await this.$TOOL.getBaseUrl(this.$API)
		},
		getMoneyByMinute(_val) {
			return this.$TOOL.getMoneyByMinute(_val);
		},
		selectionSelect(selections) {
			this.goodsSelect = selections;
			this.$emit("select", selections);
		},
		deleteRow(index) {
			ElMessageBox.confirm("确认删除吗？", "提示", { type: "warning" })
				.then(() => {
					this.selectids = this.selectids.filter((e) => {
						return this.goodsData[index].id !== e;
					});
					this.goodsData.splice(index, 1);
					this.$emit("selectChange", this.selectids);
				})
				.catch(() => {});
		},
		initData(_mode, _baseUrl, _goodsIds) {
			this.baseUrl = _baseUrl;
			// this.mode = _mode;
			this.selectids = _goodsIds;
			if (this.mode === "show") {
				this.getGoodsData();
			}
		},
		swapItems(arr, index1, index2) {
			arr[index1] = arr.splice(index2, 1, arr[index1])[0];
			return arr;
		},
		upRowSort(index) {
			if (index === 0) {
				return;
			}
			this.swapItems(this.goodsData, index, index - 1);
		},
		downRowSort(index) {
			if (index === this.goodsData.length - 1) {
				return;
			}
			this.swapItems(this.goodsData, index, index + 1);
		},
		getsShopCategorys() {
			this.$API.shop.category
				.list({
					type_str: "shop"
				})
				.then((res) => {
					this.shopCategorys = this.$TOOL.deepTree(res.data, "parent_id");
				});
		},
		handleSizeChange(_val) {
			this.pageInfo.page_size = _val;
			this.getGoodsData();
		},
		handleCurrentChange(_val) {
			this.pageInfo.page_index = _val;
			this.getGoodsData();
		},
		getGoodsData() {
			if (this.mode === "show" && this.selectids.length < 1) {
				return;
			}
			this.$API.shop.goods
				.page({
					page: this.pageInfo.page_index,
					page_size: this.pageInfo.page_size,
					selectids: this.selectids,
					...this.form
				})
				.then((res) => {
					console.log(res);
					if (res.code === 0) {
						this.pageInfo.page_index = res.data.pagination.page;
						this.pageInfo.page_size = res.data.pagination.size;
						this.pageInfo.tatal_count = res.data.pagination.total;
						this.goodsData = res.data.list;
					}
					else {
						this.$message.error(res.message);
					}
				});
		},
		onSearch() {
			this.getGoodsData();
		},
		dels() {
			let tmpIds = this.goodsSelect.map((e) => e.id);
			if (tmpIds.length < 1) {
				ElMessage.error("请选择需要删除的项");
				return;
			}
			ElMessageBox.confirm("确认删除吗？", "提示", { type: "warning" })
				.then(() => {
					const baoliu = this.selectids.filter((e) => {
						return !tmpIds.includes(e);
					});
					this.selectids = baoliu;
					if (baoliu.length < 1) {
						this.goodsData = [];
						this.pageInfo = this.defaultPageInfo;
					} else {
						this.onSearch();
					}
					console.log(this.selectids);
					this.$emit("selectChange", this.selectids);
				})
				.catch(() => {});
		}
	}
};
</script>

<style scoped></style>
